<template>
	<view>
		<uni-nav-bar fixed="true" title="搜索" statusBar="true" :border="false" @clickLeft="$tab.back()"
			left-icon="back" />

		<view class="px-32 mt-24">
			<view class="search-box flex items-center justify-between px-16">
				<view class="flex items-center">
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImg/index/icon_sousuo.png" mode=""
						class="image-40">
					</image>
					<input type="text" v-model="keyword" placeholder="请输入关键词" class="ml-12 text-28" />
				</view>
				<view class="text-28 search-btn" @click="search">
					搜索
				</view>
			</view>

			<view class="mt-48" v-if="history.length > 0">
				<view class="flex items-center justify-between">
					<view class="text-32 font-700">
						历史搜索
					</view>
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImg/index/delete.png" class="image-40" mode=""
						@click="delHistory"></image>
				</view>

				<view class="mt-32 flex flex-wrap ">
					<view class="mr-20 mb-16" v-for="(item,index) in history" :key="item" @click="search(item)">
						{{item}}
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				history: [],
				keyword: ""
			};
		},
		onShow() {
			this.keyword = ""
			this.history = uni.getStorageSync('keywords') || []
		},
		methods: {
			search(keyword) {
				if (typeof(keyword) == 'string') {
					this.keyword = keyword
				}
				
				if(!this.keyword){
					this.$modal.toast('请输入关键词!')
					return
				}
				
				let lock = this.history.includes(this.keyword)
				if (!lock) {
					uni.setStorageSync('keywords', [...this.history, this.keyword])
				}
				this.$tab.nav(`/pages/commodity/list?name=${this.keyword}`)
			},
			delHistory() {
				this.$modal.confirm('确认删除历史搜索吗?').then(con => {
					if (con) {
						uni.removeStorageSync('keywords')
						this.history = []
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.search-box {
		height: 72rpx;
		background: #F9F9F9;
		border-radius: 8rpx;
		border: 1rpx solid #FA554E;
	}

	.search-btn {
		color: #FF9E0B;
	}
</style>